
<template>
  <div class="ca">
    <!-- 作者及关注收藏下载区域开始 -->
    <div class="caheader">
        <a href="javascript:;">
            <img src="./imgall/user1.jpg" alt="" />
            <span>石楠</span>
            <span>Ericaceae</span>
        </a>
        <div class="logbox">
            <button class="attention"><span>❤</span></button>
            <button class="collect"><span>+</span></button>
            <button class="log">免费下载</button>
            <button class="lul">▼</button>
        </div>
    </div>
    <!-- 作者及关注收藏下载区域结束 -->

    <!-- 图片展示区开始 -->
    <div class="showbox">
      <div class="showmain">
        <img src="./imgall/ca1.jpg" alt="">
      </div>
    </div>
    <!-- 图片展示区结束 -->
  </div>
</template>

<style scoped>
/* 展示区开始 */
.ca .showmain,.ca .showmain>img{
  max-width: 800px;
  max-height: 500px;
}
.ca .showbox{
  display: flex;
  justify-content: center;
}
/* 展示区结束 */


.ca button{
  border: none;
  outline: none;
  color: #808080;
  font-size: 18px;
}
.ca .lul:hover,.ca .log:hover{
  background-color: #3cb;
}
.ca .attention:hover,.ca .collect:hover{
  color: #000;
}
.ca .lul{
  width: 30px;
  height: 32px;
  color: #fff;
  background-color: #3cb46e;
  border-radius: 0 5px 5px 0;
}
.ca .log{
  width: 120px;
  height: 32px;
  margin-right: 1px;
  color: #fff;
  background-color: #3cb46e;
  border-radius: 5px 0 0 5px;
}
.ca .logbox{
  display: flex;
  align-items: center;
}
.ca .attention,.ca .collect{
  width: 40px;height: 32px;
  margin-right: 10px;
}
.ca .collect{
  line-height: 32px;
  font-size: 28px;
}
.ca .fl{
  float: left;
}
.ca .fr{
  float: right;
}
.ca {
  width: 100%;
}
.ca a {
  text-decoration: none;
  color: #000;
}
.ca .caheader {
  padding-top: 50px;
  padding-bottom: 50px;
  height: 60px;
  display: flex;
  justify-content:space-around;
  align-items:center;
}
.ca .caheader > a > img {
  width: 60px;
  border-radius: 25%;
}
.ca .caheader > a {
  display: flex;
}
.ca .caheader > a>span{
  align-self: center;
}
.ca .caheader>span{
    align-self: center;
}
</style>